// import React, { useState } from 'react';
// import {
//     Form,
//     Input,
//     Button
// } from 'antd';
// const FormSizeDemo = () => {
//     const [componentSize, setComponentSize] = useState('small');
//     const onFormLayoutChange = ({ size }) => {
//         setComponentSize(size);
//     };
//     return (
//         <div>
//             <Form
//                 labelCol={{ span: 4 }}
//                 wrapperCol={{ span: 14 }}
//                 layout="horizontal"
//                 initialValues={{ size: componentSize }}
//                 onValuesChange={onFormLayoutChange}
//                 size={componentSize}
//             >
//                 <h1 align='center' style={{fontSize:20}}>商品信息填写</h1>
//                 <Form.Item label="商品id">
//                     <Input />
//                 </Form.Item>
//                 <br/>
//                 <Form.Item label="商品名称">
//                     <Input />
//                 </Form.Item>
//                 <br/>
//                 <Form.Item label="商品价格">
//                     <Input />
//                 </Form.Item>
//                 <br/>
//                 <Form.Item label="商品数量">
//                     <Input />
//                 </Form.Item>
//                 <Form.Item>
//                     <Button style={{backgroundColor:"#1890FF",width:100,marginLeft:220}} >添加</Button>
//                 </Form.Item>
//             </Form>
//         </div>
//     );
// };
// class Tianjia extends React.Component{
//     constructor(){
//         super();
//         this.state={
//             vb: "hidden"
//         }
//
//     }
//     render() {
//         return(
//             <FormSizeDemo />
//         )
//     }
// }
//
// export default Tianjia
/*
import { Form, Input, Button} from 'antd';
import React from "react";
class Demo extends React.Component {
    constructor(){
        super();
        this.state={
            vb: ""
        }
    }
    onReset = () => {
       console.log(132)
        this.setState({
            vb: 'hidden',
        })

    };
    render() {

        return (

            <Form name="control-ref" onFinish={this.onFinish}>
                <h1 align='center' style={{fontSize:20}}>商品信息填写</h1>
                <Form.Item name="商品编号" label="商品编号" rules={[{ required: true }]}>
                    <Input />
                </Form.Item>
                <Form.Item name="商品名称" label="商品名称" rules={[{ required: true }]}>
                    <Input />
                </Form.Item>
                <Form.Item name="商品价格" label="商品价格" rules={[{ required: true }]}>
                    <Input />
                </Form.Item>
                <Form.Item name="商品数量" label="商品数量" rules={[{ required: true }]}>
                    <Input />
                </Form.Item>
                {/!*<Form.Item>*!/}
                {/!*    <Button style={{backgroundColor:"#1890FF",width:100,marginLeft:220}}  type="primary" htmlType="submit" onClick={this.onReset}>*!/}
                {/!*        提交*!/}
                {/!*    </Button>*!/}
                {/!*</Form.Item>*!/}
            </Form>
        );
    }
}

class Tianjia extends React.Component{
    render() {
        return(
            <div>
                <Demo/>
            </div>
        )
    }
}
export default Tianjia*/
import {Modal, Button, Form, Input, message,} from 'antd';
import React from "react";

class Tianjia extends React.Component {
    state = { visible: false };

    showModal = () => {
        this.setState({
            visible: true,
        });
    };

    handleOk = e => {
        this.setState({
            visible: false,
        });
        message.success("添加成功")
    };

    handleCancel = e => {
        this.setState({
            visible: false,
        });
        message.success("退出添加")
    };

    render() {
        return (
            <div >
                <Button type="primary" onClick={this.showModal}>
                    添加商品
                </Button>
                <Modal
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    okText="确定添加"

                >
                    <br/>
                    <Form name="control-ref" onFinish={this.onFinish}>
                        <div style={{border:"2px gray solid",width:"100%"}}></div>
                        <h1 align='center' style={{fontSize:20}}>商品信息填写</h1>
                        <Form.Item name="商品编号" label="商品编号" rules={[{ required: true }]}>
                            <Input />
                        </Form.Item>
                        <Form.Item name="商品名称" label="商品名称" rules={[{ required: true }]}>
                            <Input />
                        </Form.Item>
                        <Form.Item name="商品价格" label="商品价格" rules={[{ required: true }]}>
                            <Input />
                        </Form.Item>
                        <Form.Item name="商品数量" label="商品数量" rules={[{ required: true }]}>
                            <Input />
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        );
    }
}

export default Tianjia